<template>
	<view class="container">
		<!-- 成功提示 -->
		<view class="success-section">
			<view class="success-icon">
				<text class="checkmark">✓</text>
			</view>
			<text class="success-text">添加成功</text>
		</view>

		<!-- 血糖数据卡片 -->
		<view class="data-card">
			<view class="data-main">
				<view class="info-row">
					<view class="blood-sugar">
						<text class="value">血糖：{{ bloodSugar.bloodGlucose }}</text>
						<text class="unit">mmol/L</text>
					</view>
					<text class="type">类型：{{ bloodSugarData.measuredTypeName }}</text>
				</view>
				<view class="info-row">
					<text>测量时间：{{ bloodSugar.measuredTime}}</text>
					<text class="method">上传方式：{{ bloodSugar.sourceName }}</text>
				</view>
				<view class="info-row">
					<text class="upload-time">上传时间：{{ bloodSugar.measuredTime }}</text>
				</view>
			</view>
			<view class="status-tag" :style="{background: bloodSugar.color}">{{ bloodSugar.tag }}</view>
		</view>

		<!-- 对比数据 -->
		<view class="comparison-section">
			<view class="comparison-item" v-if="comparisonData.lastFlag==='0'">
				<view class="comparison-icon down" >
					<text>▼</text>
				</view>
				<view class="comparison-content">
					<text class="comparison-value down">{{ comparisonData.lastDiff }}mmol/L</text>
					<text class="comparison-label">比上次({{ comparisonData.lastDate }})</text>
				</view>
			</view>
			<view class="comparison-item" v-if="comparisonData.lastFlag==='1'">
				<view class="comparison-icon up" >
					<text>▲</text>
				</view>
				<view class="comparison-content">
					<text class="comparison-value up">{{ comparisonData.lastDiff }}mmol/L</text>
					<text class="comparison-label">比上次({{ comparisonData.lastDate }})</text>
				</view>
			</view>
			<view class="divider"></view>
			<view class="comparison-item" v-if="comparisonData.tenDaysFlag==='1'">
				<view class="comparison-icon up">
					<text>▲</text>
				</view>
				<view class="comparison-content">
					<text class="comparison-value up">{{ comparisonData.tenDaysDiff }}mmol/L</text>
					<text class="comparison-label">比{{comparisonData.betweenDay}}天前({{ comparisonData.tenDaysDate }})</text>
				</view>
			</view>
			<view class="comparison-item" v-if="comparisonData.tenDaysFlag==='0'">
				<view class="comparison-icon down">
					<text>▼</text>
				</view>
				<view class="comparison-content">
					<text class="comparison-value down">{{ comparisonData.tenDaysDiff }}mmol/L</text>
					<text class="comparison-label">比{{comparisonData.betweenDay}}天前({{ comparisonData.tenDaysDate }})</text>
				</view>
			</view>
		</view>

		<!-- 血糖水平指示器 -->
		<view class="glucose-scale">
			<view class="scale-title">
				<text>理想血糖</text>
			</view>
			<view class="scale-bar">
				<view class="scale-section acceptable" style="width: 25%"></view>
				<view class="scale-section normal" style="width: 25%"></view>
				<view class="scale-section general" style="width: 25%"></view>
				<view class="scale-section very-bad" style="width: 25%"></view>
			</view>
			<view class="current-indicator" :style="indicatorPosition">
				<text class="indicator-arrow">▲</text>
			</view>
			<view class="scale-labels">
				<text class="scale-label">低血糖</text>
				<text class="scale-label">正常</text>
				<text class="scale-label">偏高</text>
				<text class="scale-label">高血糖</text>
			</view>
		</view>

		<!-- 健康提示 -->
		<view class="health-tip" v-if="bloodSugar.tag==='高血糖'">
			<text class="tip-title">【健康提示】</text>
			<text class="tip-content">
				【健康提示】检测到您的血糖/血压值偏高；别担心，我们为您提供
				<text class="highlight">专属健康管理师</text>
				，可添加企业微信，获取专业科学调整方案，助您及时改善健康状态。健康管理，我们全程相伴！
			</text>
		</view>

	</view>
</template>

<script>
	import {
		getGlucose,
		queryDateCompare
	} from '@/api/healthData/everyGlucose.js'
	export default {
		data() {
			return {
				bloodSugarData: {
				
				},
				comparisonData: {
				},
			
				indicatorPosition: 'left: 0%',
				bloodSugarId:'',
				bloodSugar:{},
                dictsList: [],
			}
		},
		onLoad(options) {
			// 从页面参数获取血糖数据
			if (options.bloodSugar) {
				this.bloodSugarData.bloodGlucose = decodeURIComponent(options.bloodSugar)
			}
			if (options.measuredTime) {
				this.bloodSugarData.measuredTime = decodeURIComponent(options.measuredTime)
			}
			if (options.measuredTypeName) {
				this.bloodSugarData.measuredTypeName = decodeURIComponent(options.measuredTypeName)
			}
			if(options.id){
				this.bloodSugarId=options.id
				// 先获取血糖数据，然后在回调中更新指示器位置
				this.getGlucose()
				this.queryDateCompare()
			} else {
				// 如果没有ID，直接更新指示器位置
				this.updateIndicatorPosition()
			}
			// 设置当前时间作为上传时间
			this.bloodSugarData.uploadTime = this.formatCurrentTime()
		},
		methods: {
			getIndicatorPosition() {
				// 根据血糖标签返回指示器位置
				const tag = this.bloodSugar.tag
				let position = 0
				switch (tag) {
					case '低血糖':
						position = 12.5 // 低血糖区域中间位置 (0-25% 的中间)
						break
					case '正常':
						position = 37.5 // 正常区域中间位置 (25-50% 的中间)
						break
					case '偏高':
						position = 62.5 // 偏高区域中间位置 (50-75% 的中间)
						break
					case '高血糖':
						position = 87.5 // 高血糖区域中间位置 (75-100% 的中间)
						break
					default:
						position = 37.5 // 默认显示在正常区域
				}
				
				return `left: ${position}%`
			},
			formatCurrentTime() {
				const now = new Date()
				const year = now.getFullYear()
				const month = now.getMonth() + 1
				const day = now.getDate()
				const hour = now.getHours()
				const minute = now.getMinutes()
				return `${year}/${month}/${day} ${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`
			},
			bookConsultation() {
				// 跳转到预约咨询页面
				uni.navigateTo({
					url: '/pages/consultation/index'
				})
			},
			backToList() {
				// 返回血糖列表页面
				uni.navigateBack({
					delta: 2
				})
			},
			getGlucose(){
				getGlucose(this.bloodSugarId).then(res=>{
					this.bloodSugar=res.data
					// 数据加载完成后更新指示器位置
					this.updateIndicatorPosition()
				}).catch(err=>{
					console.error('获取血糖数据失败:', err)
					// 即使请求失败也要更新指示器位置，使用默认值
					this.updateIndicatorPosition()
				})
			},
			updateIndicatorPosition(){
				// 更新指示器位置
				this.indicatorPosition = this.getIndicatorPosition()
			},
			
			formatTime(time) {
				return time.replace('-', '年').replace('-', '月').replace(' ', ' ')
			},
			
			queryDateCompare(){
				queryDateCompare(this.bloodSugarId).then(res=>{
					console.log(res)
					this.comparisonData=res.data
				})
			}
			
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: #fff;
		/* padding: 20rpx; */
		/* padding-bottom: 120rpx; */
	}

	.success-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 60rpx 0 40rpx;
		background-color: #fff;
		/* border-radius: 20rpx; */
		margin-bottom: 20rpx;
	}

	.success-icon {
		width: 120rpx;
		height: 120rpx;
		background-color: #4cd964;
		border-radius: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
	}

	.checkmark {
		color: #fff;
		font-size: 60rpx;
		font-weight: bold;
	}

	.success-text {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
	}

	.data-card {
		margin: 0 30rpx 24rpx;
		padding: 32rpx;
		background: #FBFBFD;
		border-radius: 12rpx;
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		position: relative;
	}

	.data-main {
		flex: 1;
		margin-right: 90rpx;
	}

	.info-row {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
		font-size: 24rpx;
		color: #000;
		justify-content: space-between;
	}

	.info-row:last-child {
		margin-bottom: 0;
	}

	.blood-sugar {
		display: flex;
		align-items: baseline;
	}

	.blood-sugar .value {
		font-size: 24rpx;
		font-weight: 600;
		color: #000;
	}

	.blood-sugar .unit {
		font-size: 24rpx;
		color: #000;
		margin-left: 8rpx;
	}

	.type {
		font-size: 24rpx;
		color: #000;
		min-width: 240rpx;
		text-align: right;
	}

	.method {
		min-width: 240rpx;
		text-align: right;
		font-size: 24rpx;
		color: #000;
	}

	.upload-time {
		color: #999;
		font-size: 20rpx;
	}

	.status-tag {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		width: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 26rpx;
		border-top-right-radius: 24rpx;
		border-bottom-right-radius: 24rpx;
		writing-mode: vertical-lr;
		letter-spacing: 4rpx;
		padding: 20rpx 0;
	}

	.status-label {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		padding: 8rpx 16rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
		color: #fff;
	}

	.status-label.normal {
		background-color: #4cd964;
	}

	.status-label.acceptable {
		background-color: #5ac8fa;
	}

	.status-label.general {
		background-color: #ffcc00;
	}

	.status-label.bad {
		background-color: #ff9500;
	}

	.status-label.very-bad {
		background-color: #ff3b30;
	}

	.comparison-section {
		background-color: #FBFBFD;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-left: 10px;
		margin-right: 10px;
		/* box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); */
	}

	.comparison-item {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.comparison-icon {
		width: 40rpx;
		height: 40rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}

	.comparison-icon.down {
		background-color: #e8f7f1;
		color: #0BD45B;
	}

	.comparison-icon.up {
		background-color: #ffe8e8;
		color: #EC6666;
	}

	.comparison-content {
		display: flex;
		flex-direction: column;
	}

	.comparison-value {
		font-size: 32rpx;
		font-weight: 600;
		margin-bottom: 8rpx;
	}

	.comparison-value.down {
		color: #0BD45B;
	}

	.comparison-value.up {
		color: #EC6666;
	}

	.comparison-label {
		font-size: 24rpx;
		color: #999;
	}

	.divider {
		width: 2rpx;
		height: 60rpx;
		background-color: #eee;
		margin: 0 20rpx;
	}

	.glucose-scale {
		background-color: #FBFBFD;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		margin-left: 10px;
		margin-right: 10px;
		position: relative;
		/* box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); */
	}

	.scale-title {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 20rpx;
	}

	.scale-bar {
		position: relative;
		height: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
		display: flex;
		margin-bottom: 20rpx;
	}

	.scale-section {
		height: 100%;
	}

	.scale-section.normal {
		background-color: #4cd964;
	}

	.scale-section.acceptable {
		background-color: #5ac8fa;
	}

	.scale-section.general {
		background-color: #ffcc00;
	}

	.scale-section.bad {
		background-color: #ff9500;
	}

	.scale-section.very-bad {
		background-color: #ff3b30;
	}

	.current-indicator {
		position: absolute;
		top: 20rpx;
		width: 20rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.indicator-arrow {
		color: #ff3b30;
		font-size: 36rpx;
		font-weight: bold;
	}

	.scale-labels {
		display: flex;
		justify-content: space-between;
	}

	.scale-label {
		font-size: 24rpx;
		color: #666;
	}

	.health-tip {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 40rpx;
		/* box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); */
	}

	.tip-title {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}

	.tip-content {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
	}

	.highlight {
		color: #ff3b30;
		font-weight: 600;
	}

	.action-buttons {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.consult-button {
		height: 88rpx;
		background-color: #4cd964;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.consult-button text {
		color: #fff;
		font-size: 32rpx;
		font-weight: 500;
	}

	.back-button {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.back-button text {
		color: #666;
		font-size: 28rpx;
	}
</style>
